<template>
    <div class="wh-100% select-none">
        <n-card class="w-300px profile-card">
            <template #header>
                <div class="flex items-center gap-10px">
                    <span class="font-size-16px">个人信息</span>
                </div>
            </template>
            <template #header-extra>
                <n-button
                    text
                    class="edit-btn hidden"
                    :focusable="false"
                    @click="userFormvisible = true"
                >
                    <n-icon :size="18">
                        <Create />
                    </n-icon>
                </n-button>
            </template>
            <div class="w-full flex flex-col items-center gap-20px">
                <n-icon :component="PersonCircle" :size="72" />
                <div class="w-full flex-center flex-col">
                    <div class="font-size-20px font-bold">
                        {{ userInfo.userName }}
                    </div>
                    <n-tag :type="`primary`">
                        {{ userInfo.role === 1 ? "管理员" : "超级管理员" }}
                    </n-tag>
                </div>
            </div>
            <n-list>
                <n-list-item>
                    <n-thing
                        title="账号"
                        :title-extra="userInfo.account"
                    ></n-thing>
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="注册时间"
                        :title-extra="new Date().toLocaleDateString()"
                    ></n-thing>
                </n-list-item>
            </n-list>
        </n-card>
        <n-drawer
            v-model:show="userFormvisible"
            :auto-focus="false"
            :width="360"
            placement="right"
        >
            <n-drawer-content>
                <template #header> 编辑个人信息 </template>
                <UserForm
                    :data="userInfo"
                    @submit:data="handleUpdateUserName"
                    @update:password="handleResetPassword"
                />
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getStore, resetStores } from "@/store";
import { Create, PersonCircle } from "@vicons/ionicons5";

import type { User } from "@/types/user";

import UserForm from "./components/user-form/index.vue";
import { updateUserName, resetPassword } from "@/service/api/user";

// import UserForm from "@/components/user-form/index.vue";

const router = useRouter();
const userStore = getStore("user");
const userInfo = ref<User>(userStore.getUserInfo);

const userFormvisible = ref(false);

// 更新用户信息 --> 更改密码 | 更改用户信息
const handleUpdateUserName = async (data: User) => {
    try {
        await updateUserName(userInfo.value.account, data.userName);
        userInfo.value.userName = data.userName;
        window.NMessage.success("修改成功");
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};

const handleResetPassword = async (password: string) => {
    try {
        await resetPassword(userInfo.value.account, password);
        window.NDialog.success({
            title: "修改成功",
            content: "修改密码成功, 请重新登陆",
            closable: false,
            maskClosable: false,
            positiveText: "重新登陆",
            onPositiveClick: () => {
                resetStores();
                sessionStorage.clear();
                router.push({ name: "login" });
            },
        });
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};
</script>

<style scoped>
.profile-card:hover .edit-btn {
    display: block;
}
</style>
